<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-查找条件 -->
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row type="flex" :gutter="4">
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="组织">
              <a-select v-model="form.orgId" placeholder="选择组织">
                <a-select-option :value="item.orgId" v-for="(item) in [{ orgId: '', orgName: '选择组织' }, ...orgList]"
                  :key="item.orgId">{{ item.orgName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
            <a-form-item label="状态">
              <a-select v-model="form.status" placeholder="选择状态">
                <a-select-option :value="item.value"
                  v-for="(item, index) in [{ name: '选择状态', value: '' }, ...statusList]" :key="index">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" :xs="24" :sm="6" :md="12" :lg="4">
            <a-form-item label="日期">
              <a-range-picker v-model="form.date" />
            </a-form-item>
          </a-col>
          <a-col :span="6" :xs="24" :sm="6" :md="12" :lg="6" style="margin-top:6px;">
            <a-button type="primary" @click="fetchList()">查询</a-button>
            <a-button style="margin-left: 10px" @click="init()">重置</a-button>
            <a-button style="margin-left: 10px" @click="editOpen()">添加</a-button>
          </a-col>

        </a-row>
      </a-form>
      <!-- E-查找条件 -->
      <!-- S-表格 -->
      <a-table :columns="columns" :data-source="data" bordered :pagination="{ total }" @change="tableChange">
        <!-- S-检查类型 -->
        <template slot="checkType" slot-scope="record">
          <span v-if="record?.checkType == 1">计划检查</span>
          <span v-if="record?.checkType == 2">立即检查</span>
          <span v-if="record?.checkType == 3">隐患上报</span>
        </template>
        <!-- E-检查类型 -->
        <!-- S-进度 -->
        <template slot="status" slot-scope="record">
          <span v-if="record?.status == -1">驳回</span>
          <span v-if="record?.status == 0">进行中</span>
          <span v-if="record?.status == 1">整改中</span>
          <span v-if="record?.status == 2">终审</span>
          <span v-if="record?.status == 3">结案</span>
        </template>
        <!-- E-进度 -->
        <!-- S-操作 -->
        <template slot="action" slot-scope="record">
          <a-space>
            <a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
            <a-button danger @click="deleteTap(record?.id)">删除</a-button>
            <a-button danger @click="drawerOpen(record)">详情</a-button>
          </a-space>
        </template>
        <!-- E-操作 -->

      </a-table>
      <!-- E-表格 -->
      <!-- S-编辑弹框 -->
      <edit-model ref="editRef" @ok="fetchList" :orgList="orgList" :checkTypeList="checkTypeList"
        :userAllList="userAllList" />
      <!-- E-编辑弹框 -->
      <!-- S-抽屉 -->
      <drawer ref="drawerRef" :checkTypeList="checkTypeList" :statusList="statusList" />
      <!-- E-抽屉 -->
    </div>
  </a-spin>
</template>

<script>
import { mapState } from 'vuex'
var dayjs = require('dayjs')
import { message } from 'ant-design-vue';
import editModel from "./components/edit"
import drawer from "./components/drawer"
import { postRecordList, postRecordDelete, getRecordDetail } from "@/services"
import { getOrgList } from "@/services"
import { getUserAllList } from "@/services"
export default {
  name: 'Inspect',
  components: {
    editModel,
    drawer,
  },
  data() {
    return {
      // 表单
      form: {
        checkEnd: '',
        checkStart: '',
        date: [],
        limit: 10,
        orgId: '',
        page: 1,
        status: '',
      },
      // 状态列表
      statusList: [
        { name: '驳回', value: -1 },
        { name: '进行中', value: 0 },
        { name: '整改中', value: 1 },
        { name: '终审', value: 2 },
        { name: '结案', value: 3 },
      ],
      // 检查类型列表
      checkTypeList: [
        { name: '计划检查', value: 1 },
        { name: '立即检查', value: 2 },
        { name: '隐患上报', value: 3 },

      ],
      // 数据
      data: [],
      // 组织列表
      orgList: [],
      // 全部用户列表
      userAllList: [],
      // 表格结构
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        }, {
          title: '检查结果',
          dataIndex: 'checkResultTitle',
          key: 'checkResultTitle',
        }, {
          title: '计划任务id',
          dataIndex: 'checkTaskId',
          key: 'checkTaskId',
        }, {
          title: '检查类型',
          key: 'checkType',
          scopedSlots: { customRender: 'checkType' },
        }, {
          title: '组织id',
          dataIndex: 'orgId',
          key: 'orgId',
        }, {
          title: '组织名称',
          dataIndex: 'orgName',
          key: 'orgName',
        }, {
          title: '表格id',
          dataIndex: 'questionTableId',
          key: 'questionTableId',
        }, {
          title: '上报人',
          dataIndex: 'reportUser',
          key: 'reportUser',
        }, {
          title: '上报人id',
          dataIndex: 'reportUserId',
          key: 'reportUserId',
        }, {
          title: '进度',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        }, {
          title: '计划任务名称',
          dataIndex: 'taskName',
          key: 'taskName',
        }, {
          title: '操作',
          key: 'operation',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 是否显示
      show: false,
      // 总数
      total: 0,
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
  },
  async created() {
    // 组织列表
    await this.fetchOrgList()
    // 获取列表
    this.fetchList()
    // 获取全部用户列表
    this.fetchUserAllList()
  },
  methods: {
    /**
     * 打开抽屉
     */
    async drawerOpen(e) {
      let data = await this.fetchData(e?.id)
      this.$refs.drawerRef.open(data)
    },
    /**
     * 打开弹框
     */
    async editOpen(e) {
      let data = e && await this.fetchData(e?.id)
      this.$refs.editRef.open(data)
    },
    /**
     * 删除 
     */
    deleteTap(id) {
      let t = this
      this.$confirm({
        title: '提示',
        content: '你确定要删除吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        async onOk() {
          t.show = false
          let res = await postRecordDelete(`?recordId=${id}`)
          t.show = true
          if (res.code == 0) {
            message.success('删除成功')
            t.fetchList()
          } else {
            message.error(res.msg)

          }
        },
      });
    },
    /**
     * 表格回调
     */
    tableChange(e) {
      this.form.page = e.current
      this.form.limit = e.pageSize
      // 获取数据
      this.fetchList()
    },
    /**
     * 日期回调
     */
    dateChange(e) {
      this.form.checkStart = dayjs(e[0]['_d']).format('YYYY-MM-DD')
      this.form.checkEnd = dayjs(e[1]['_d']).format('YYYY-MM-DD')
      this.form.date = e
    },
    /**
     *重置
     */
    init() {
      this.form = this.$options.data().form
      this.fetchList()
    },
    /**
     * 获取列表
     */
    async fetchList() {
      this.show = false
      let { code, data } = await postRecordList({
        limit: this.form.limit,
        orgId: this.form.orgId,
        page: this.form.page,
        status: this.form.status,
        checkStart: this.form.date[0] ? dayjs(this.form.date[0]).format('YYYY-MM-DD hh:mm:ss') : '',
        checkEnd: this.form.date[1] ? dayjs(this.form.date[1]).format('YYYY-MM-DD hh:mm:ss') : '',
      })
      this.show = true
      if (code == 200) {
        this.data = data?.records
        this.total = data?.total
      }
    },
    /**
     * 获取组织列表 
     */
    async fetchOrgList() {
      let { code, data } = await getOrgList({})
      if (code == 200) {
        this.orgList = data
      }
    },
    /**
     * 获取详情
     */
    async fetchData(id) {
      let { code, data, msg } = await getRecordDetail({
        recordId: id
      })
      if (code == 200) {
        return data
      } else {
        message.error(msg)
      }
    },
    /**
     * 获取所有用户列表
     */
    async fetchUserAllList() {
      this.show = false
      let { code, data } = await getUserAllList({})
      this.show = true
      if (code == 200) {
        this.userAllList = data
      }
    },
  },
}
</script>

<style scoped lang="less">

</style>